---
import Header from '@/components/Header.astro';
import Footer from '@/components/Footer.astro';
import Layout from './Layout.astro';
import Main from './Main.astro';
import Comment from '@/components/Comment.astro';
import config from '@/config';

export interface Props {
  frontmatter: {
    title: string;
    description?: string;
    discussionNumber?: number;
  };
}

const { frontmatter } = Astro.props;
---

<Layout title={`${frontmatter.title} | ${config.title}`}>
  <Header />
  <Main pageTitle="About">
    <article
      id="article"
      class="app-prose max-w-app prose-pre:bg-(--shiki-light-bg) dark:prose-pre:bg-(--shiki-dark-bg) mx-auto mt-8"
    >
      <slot />
    </article>

    <Comment discussionNumber={frontmatter.discussionNumber} />
  </Main>
  <Footer />
</Layout>
